<template>
  <div >
    todo list
      <div>
        <input v-model="inputValue" >
        <button @click="handleSubmit"> Submit</button>
      </div>
      <ul>
        <li v-for="(item,index) of todoList" 
        v-bind:key="index"
        @click="handleDeleteItem"
         >{{item}} ,index:{{index}}</li>
      </ul>

    <router-view/>
  </div>
</template>

<script>
export default {
  data: function() {
    return{
        inputValue :"", 
        todoList : []
    }
  },
  methods: {
    handleSubmit: function() {
      this.todoList.push(this.inputValue),
      this.inputValue=''
    },
    handleDeleteItem:function(index){
      this.todoList.splice(index,1)
    }
  }


};
</script>

<style>
</style>
